<template>
  <view class="container bg-back flex-1">
    <view class="flex justify-center mt-[192rpx] flex-col items-center">
      <view class="clock">
        <view class="hand hour-hand"></view>
        <view class="hand minute-hand"></view>
      </view>
      <view class="text-main font-bold mt-7">AI作图中，等待时间约3s</view>
    </view>
    <view class="mx-[30rpx] bg-white rounded-[20rpx] mt-14">
      <view class="px-5 py-4 text-justify" style="line-height: 1.8">
        在这个场景描述中，一位年轻的艺术家在宁静的森林中创作，阳光透过树叶酒在他身上，他专注地绘制着一幅栩栩如生的神秘森林景观，周围飘散着淡淡的魔法光芒
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";

// 初始化数据
const str = "在这个场景描述中，一位年轻的艺术家在宁静的森林中创作，阳光透过树叶酒在他身上，他专注地绘制着一幅栩栩如生的神秘森林景观，周围飘散着淡淡的魔法光芒";

// 方法：将字符串分组
const groupAndFillArray = (input, groupSize = 10) => {
  const groups = [];
  for (let i = 0; i < input.length; i += groupSize) {
    groups.push(input.slice(i, i + groupSize));
  }
  return groups;
};

const groups = ref(groupAndFillArray(str));
const displayedGroups = ref([]);
const isOutputting = ref(false);

// 方法：逐组输出字符串
const startOutput = () => {
  if (isOutputting.value) return;

  isOutputting.value = true;
  displayedGroups.value = [];
  
  let index = 0;

  const outputGroup = () => {
    if (index < groups.value.length) {
      displayedGroups.value.push(groups.value[index]);
      index++;
      setTimeout(outputGroup, 1000);
    } else {
      isOutputting.value = false;
    }
  };

  outputGroup();
};
</script>

<style lang="scss" scoped>
.clock {
  width: 117rpx;
  height: 117rpx;
  background: #fff;
  border-radius: 50%;
  position: relative;
  z-index: 55;
}
</style>
